<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item v-if="queryParams" :label="$t('Month')">
        <el-date-picker type="month" v-model="queryParams.date" value-format="yyyy-MM" @change="queryData" />
      </el-form-item>
    </el-form>
    <div ref="chart" style="width: 90vw;height: 45vh;"></div>
  </div>
</template>
<script>
  import {
    MultipleValueChart
  } from '@/views/components/chart'
  import {
    FreeCalendarChart,
    valueFormat,
  } from './components/CalendarChart'
  export default {
    name: 'CalendarValueChart',
    mixins: [MultipleValueChart, FreeCalendarChart],
    data() {
      const vm = this
      return {
        valueFormat,
        chartOption: {
          title: {
            text: vm.$t('chart.UsePercentAnalysis'),
            left: 'center'
          },
          tooltip: {
            show: true
          },
          xAxis: [{
            type: 'category'
          }],
          yAxis: [{
            type: 'value',
            show: true
          }]
        },
        queryParams: {
          groupDept: true,
          groupType: false,
          groupDate: 3
        },
        groupKeys: ['date'],
        valueKeys: ['totalCount', 'onlineCount', 'workCount', 'offlineCount']
      }
    },
    created() {},
    mounted() {},
    methods: {}
  }

</script>
